<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>c-fans</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * {
            margin: 0 auto;
        }

        body {
            overflow-y: hidden;
            min-height: 100vh;
            background-color: #e493d0;
            background-image:
                    radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
                    radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
                    radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
                    radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
                    radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
            background-size:
                    130vmax 130vmax,
                    80vmax 80vmax,
                    90vmax 90vmax,
                    110vmax 110vmax,
                    90vmax 90vmax;
            background-position:
                    -80vmax -80vmax,
                    60vmax -30vmax,
                    10vmax 10vmax,
                    -30vmax -10vmax,
                    50vmax 50vmax;
            background-repeat: no-repeat;
            animation: move 7s linear infinite;
        }

        @keyframes move {

            0%,
            100% {
                background-size:
                        130vmax 130vmax,
                        80vmax 80vmax,
                        90vmax 90vmax,
                        110vmax 110vmax,
                        90vmax 90vmax;
                background-position:
                        -80vmax -80vmax,
                        60vmax -30vmax,
                        10vmax 10vmax,
                        -30vmax -10vmax,
                        50vmax 50vmax;
            }

            25% {
                background-size:
                        100vmax 100vmax,
                        90vmax 90vmax,
                        100vmax 100vmax,
                        90vmax 90vmax,
                        60vmax 60vmax;
                background-position:
                        -60vmax -90vmax,
                        50vmax -40vmax,
                        0vmax -20vmax,
                        -40vmax -20vmax,
                        40vmax 60vmax;
            }

            50% {
                background-size:
                        80vmax 80vmax,
                        110vmax 110vmax,
                        80vmax 80vmax,
                        60vmax 60vmax,
                        80vmax 80vmax;
                background-position:
                        -50vmax -70vmax,
                        40vmax -30vmax,
                        10vmax 0vmax,
                        20vmax 10vmax,
                        30vmax 70vmax;
            }

            75% {
                background-size:
                        90vmax 90vmax,
                        90vmax 90vmax,
                        100vmax 100vmax,
                        90vmax 90vmax,
                        70vmax 70vmax;
                background-position:
                        -50vmax -40vmax,
                        50vmax -30vmax,
                        20vmax 0vmax,
                        -10vmax 10vmax,
                        40vmax 60vmax;
            }
        }
        body{
            margin: 0;
            text-align: center;
        }
        h2{
            color: rgba(255,36,66,0.6);
            font-size: 40px;
            margin-bottom: 0;
            padding-top: 10px;
        }
        #d1{
            position: absolute;
            top:150px;
            right: 625px;
        }
        #img{
             border-radius: 10px;
            width: 150px;
            height: 50px;
        }
        .a1{
            text-decoration: none;
            color: #606266;
            font-size: 16px;
        }
        #d2{
            padding-right: 80px;
        }
        #a2{
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div id="d1">
    <img id="img" src="./img/a.png" alt="">
    <h2>欢迎登录c-fans</h2>
    <el-card style="width: 600px; height: 350px; margin: 50px auto;
            background-color: rgba(255,255,255,0.3);">
        <el-form label-width="80px" style="width: 400px;margin: 50px auto">
            <el-form-item label="用户名">
                <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
            </el-form-item>

            <el-form-item>
                <div id="d2"><a class="a1" href="register.html">点击此处注册账号</a></div>
            </el-form-item>
            <el-button type="reg" round @click="login">登录</el-button><br>
            <template>
                <!-- `checked` 为 true 或 false -->
                <div id="a2"><el-checkbox v-model="checked"><a class="a1" href="notice.html">用户须知</a></el-checkbox></div>
            </template>
        </el-form>
    </el-card>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:function (){
            return {
                checked: false,
                user: {
                    username: '',
                    password: '',
                }
            }
        },
        methods:{
            login(){
                if (v.user.username==''){
                    this.$message('手机号不能为空');
                }else if(v.user.password==''){
                    this.$message('密码不能为空');
                }else{
                    location.href="/index.html";
                }
            }
        }
    })
</script>
</body>
</html>